<template>
    <div class="alarm-container">
        <div class="left-menu-box" >
            <baseDrawer :title="$t('equipmentType')" @changeShow='changeShow' >
                <div class="selectItem" v-for="(item,index) in deviceTypes" :id="item.value" :key="index" :class="activeClass ==index?'active':''">
                    <span @click="changeDeviceType(item.value,index)">{{item.code}}</span>
                </div>
            </baseDrawer>
        </div>
        <div class="right-menu-box" :style="changeShowFlag?'width: calc(100% - 200px);':'width: 100%;'">
            <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)" :column='column'>
                <template #errorType="{data}">
                {{UtilsFun.getValueByCode(alarmTypes,data.errorType)}}
                </template>
            </baseTable>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
import baseDrawer from '../../../components/common/baseDrawer'
export default {
    components: {
        baseTable,
        baseDrawer
    },
    props: {

    },
    data() {
        return {
            deviceType:'',
            searchData:{
                alarmType:'',
                alarmLevel:''
            },
            activeClass:0,
            deviceTypes:[],
            alarmTypes:[],
            changeShowFlag:true,
            selectDatalist:[],
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('alarm.errorCode'),
                value: 'errorCode',
            },{
                title: this.$t('alarm.errorType'),
                value: 'errorType',
                slot: 'errorType'
            },{
                title: this.$t('alarm.errorMessage'),
                value: 'errorMessage'
            },{
                title: this.$t('alarm.alarmEquipment.numcount'),
                value: 'numcount'
            }],
            size:10,
            current:1,
            total:1,
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch();
    },
    methods: {
        changeShow(flag){
            this.changeShowFlag = flag
        },
        changeDeviceType(val,index){
            this.deviceType=val
            this.activeClass=index
            this.query()
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'INVERTER_TYPES,ALARM_TYPES',
                lang:localStorage.getItem('lang')
            })
            this.alarmTypes = res.ALARM_TYPES
            this.deviceTypes = res.INVERTER_TYPES
            this.deviceType=this.deviceTypes[0].value
            this.initTable()
        },
        async initTable(){
            this.loading = true
            let res = await this.API.showAlarmType({
                size: this.size,
                current: this.current,
                deviceType:this.deviceType
            })
            this.dataRows = res.rows || []
            this.total = res.total
            this.loading = false
        },
        query(){
            this.current = 1
            this.initTable()
        },
        handleSelectionChange(val){
            this.selectDatalist = val
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.initTable()
        },
        handleCurrentChange(val) {
          this.current = val
          this.initTable()
        }
    },
};
</script>

<style lang="less">
.alarm-container{
    display: flex;
    height: 100%;
    font-size: 14px;
    width: 100%;
    font-size: 14px;
    .right-menu-box{
        flex: 1;
    }
    .selectItem{
        span{
            display:block;
            padding: 5px;
            font-size: 13px;
        }
        &:hover,&.active{
            background:#FEA429;
            cursor: pointer;
        }
    }
}

</style>
